<template>
  <div class="container">
    <div class="menu_container">
      <div class="menu">
        <div
          class="menu_item"
          v-for="item in 15"
          :key="item"
          @mouseenter="hander(item)"
        >
          <div>菜单{{ item }}</div>
          <div class="menu_sub">
            <div>菜单{{ item }}-1</div>
            <div>菜单{{ item }}-2</div>
            <div>菜单{{ item }}-3</div>
          </div>
        </div>
        <div :style="{ height: showHight + 'px' }" v-show="show"></div>
      </div>
    </div>
    <div class="content">
     明天放假,你开心吗 ?
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
const show = ref(false);
const showHight = ref();
const hander = (item: any) => {
  showHight.value = item.toString() * 10 <= 150 ? item.toString() * 10 : 150;
  show.value = true;
};
</script>

<style lang="scss" scoped>
.container {
  width: 800px;
  height: 500px;
  background-color: pink;
  display: flex;
  overflow-y: scroll;
  position: relative;
  &::-webkit-scrollbar {
    width: 0px;
  }
  .menu_container {
    // overflow-y: scroll;

    .menu {
      width: 200px;
      height: fit-content;
      background: skyblue;
      .menu_item {
        width: 200px;
        height: 50px;
        background: #6f83c5;
        margin-bottom: 5px;
        text-align: center;
        line-height: 50px;
        color: #fff;
        position: relative;

        & .menu_sub {
          position: absolute;
          width: 200px;
          height: 200px;
          left: 210px;
          top: 0px;
          background-color: rgba(0, 0, 0, 0.9);
          display: none;
          z-index: 220000;
          // overflow-y: scroll;
          &::-webkit-scrollbar {
              width: 0px;
            }
          & :hover {
            background-color: #af4747;
          }
          &::before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-right: 10px solid rgba(0, 0, 0, 0.9);
            border-left: 10px solid transparent;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            left: -20px;
            top: 20px;
            z-index: 999999;
          }
        }
        &:hover {
          background: #314eae;
          cursor: pointer;
          .menu_sub {
            display: block;
            cursor: pointer;
          }
        }
      }
    }
  }

  .content {
    // flex: 1;
    // overflow: hidden;
    background-color: #8e4040;
    width: 610px;
    height: 500px;
    position: fixed;
    left: 550px;
    color: #fff;
  }
}
</style>
